<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>giggleSign</title>
  <style type="text/css">
    body {text-align:center;
      background-color: #f4fdfc;}
    #top-image {
      background-size: 1920px 1080px;
      background: linear-gradient(
              rgba(0, 0, 0, 0.2),
              rgba(0, 0, 0, 0.2)
      ), url('img/bgbg2.png') no-repeat fixed;
      position:fixed ;
      top:0;
      width:100%;
      z-index:0;
      height:100%;
    }
    #logo{
      background-color: transparent;
      margin-top: 220px;
    }
    ::-webkit-input-placeholder { /* WebKit browsers */
      color:#999;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:#999;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:#999;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
      color:#999;
    }
    .signup {
      text-align: center;
      margin:20px auto;
      width: 300px;
      height: 250px;
    }
    .signInput{
      font-size: 15px;
      width: 300px;
      height: 40px;
      background-color: transparent;
      text-indent:32px;
      border: none;
    }
    #usernameDiv{
      border-bottom: none;
      background-color: white;
      filter:alpha(Opacity=50);
      opacity: 0.8;

    }
    #username{
      background: url(img/username.png) no-repeat;
      background-position: 4px 7px;
      text-indent:32px;
      background-size: 25px 25px;

    }
    #myemailDiv{
      border-bottom: 1px solid #DDDDDD;
      background-color: white;
      filter:alpha(Opacity=50);
      opacity: 0.8;
    }
    #myemail{
      background: url(img/email.png) no-repeat;
      background-position: 4px 7px;
      background-size: 25px 25px;
      border-top: 1px solid #DDDDDD ;
    }
    #passwordDiv{
      width: 302px;
      height: 40px;
      border-top: 1px solid #DDDDDD;
      background-color: white;
      filter:alpha(Opacity=50);
      opacity: 0.8;
    }
    #password{
      position: relative;
      top: -40px;
      background: url(img/password.png) no-repeat;
      background-position: 4px 7px;
      background-size: 25px 25px;
      border: none;

    }
    #submitBtn{
      font:normal 15px 微软雅黑;
      border: 1px solid #999999;
      -webkit-border-radius:3px;
      -webkit-appearance: none;
      border-radius: 3px;
      width: 300px;
      height: 40px;
      background-color: #ffffff;
      color: #666666;
      margin-top: 20px;
    }
    .warn{
      width: 150px;
      position: relative;
      top: -268px;
      left: 305px;
    }
    .warnPic{
      width: 150px;
      height: 40px;
    }
    #checkcodeDiv{
      background-color: white;
      filter:alpha(Opacity=50);
      opacity: 0.8;
      border: 1px solid #bbbbbb;
      border-top: none;
      border-bottom: none;
    }
    #checkcode{
      background-color: transparent;
      background: url(img/verification.png) no-repeat;
      background-position: 4px 7px;
      background-size: 25px 25px;
      text-indent:32px;
      font-size: 15px;
      width: 300px;
      height: 40px;
      border: none;

    }
    #sendemailbtn{
      position: relative;
      top: -40px;
      right: -0.5px;
      float: right;
      font: 13px 微软雅黑;
      width: 101px;
      height: 40px;
      border: none;
      border-left: 2px solid honeydew;
      color: #00e6d0;
      background-color: white;
      margin-top: -2px;
    }
    #sendemailbtn:hover{
      border: 1px solid #63decd;
      color: #63decd;
    }
    #submitBtn{
      margin-top: 20px;
      font:bold 18px 微软雅黑;
      border: 1px solid #63decd;
      width: 300px;
      height: 40px;
      background-color: #63decd;
      color: #ffffff;
    }
    #submitBtn:hover{
      background-color: #00e6d0;
    }

    #goLogin{
      color: #333333;
    }
    #goLogin:hover{
      color: #63decd;
    }
    #passwordMessage{
      margin-top: 40px;
    }

  </style>

  <script language="JavaScript" src="js/jquery-3.2.1.min.js"></script>
  <script language="JavaScript" src="js/jquery-1.11.0.min.js"></script>
  <script language="JavaScript" src="js/register.js"></script>
  <script src="js/md5.js"></script>
  <script src='js/ios-parallax.js'></script>
</head>

<body>
<div id="top-image">
  <div id="content" class="container">
    <!--放置内容-->
    <img src= "img/logologin.png" width="200px" height="75px" id="logo"/>
    <div class="signup">
      <div style="background-color: transparent;height: 172px;width: 302px">
        <div id="usernameDiv">
          <input type="text" name="username" id="username" maxlength="8"  class="signInput" placeholder=" 用户名(2-8位)" onblur="showUsernameMessage()" onfocus="cancelUsernameMessage()">
        </div>
        <div id="myemailDiv">
          <input type="email" name="email" id="myemail" class="signInput" placeholder="电话号码"  >
        </div>
        <div id="checkcodeDiv">
          <input type="text" id="checkcode" placeholder=" 验证码" maxlength="4">
          <input type="button" onclick="sendCode()" id="sendemailbtn" value="发送验证码">
        </div>
        <div id="passwordDiv">
          <input type="password" name="password" id="password" maxlength="20" class="signInput" placeholder=" 密码（6-20位）" onblur="showPasswordMessage()" onfocus="cancelPasswordMessage()">
        </div>
      </div>

      <input type="submit" name="submit" id="submitBtn" value="注册" style="height:40px;width:300px;display:inline-block;" onclick="register()">
      <div style="font: 13px 微软雅黑; margin-bottom: 0"><br>已有密码？<a href="login.html" id="goLogin">直接登录</a> </div>

      <div class="warn">
        <img src="img/用户名无效.png" id="usernameMessage" class="warnPic" style="visibility: hidden"><br>
        <img src="img/邮箱无效.png" id="emailMessage" class="warnPic" style="visibility: hidden"><br>
        <img src="img/密码无效.png" id="passwordMessage" class="warnPic" style="visibility: hidden">
      </div>

    </div>
  </div>
</div>

<script>
    $('#top-image').iosParallax({

        // How fast the background moves
        movementFactor: 50,

        // How much to dampen the movement (higher is slower)
        dampenFactor: 36

    });
</script>
</body>
</html>
